<template>
	<view>
		<view class="">
			<view class="" style="background-color: coral;height: 20vh;">
				<view class=""
					style="display: flex;justify-content: space-between;color: white;position: fixed;top: 0;margin-top: 20px;width: 100%;padding: 0 10px;">
					<u-icon size="55" name="arrow-left" @click="backtoItem"></u-icon>
					<u-icon size="55" name="more-dot-fill"></u-icon>
				</view>

				<danmu ref="lffBarrage" :maxTop="500"></danmu>
			</view>



			<view class="" style="padding: 0 10px;">

				<view class="" style="display: flex;justify-content: space-between;">
					<view class="" style="position: relative">
						<view class="" style="height: 58px;">
							<view class="" style="display: flex;">
								<!-- 左边 -->
								<view class="" style="position: relative;top: -16px;">
									<image src="../../static/ali/qiqiu.png"
										style="width: 70px;height: 70px;border-radius: 15px;border: 1px solid white;"
										mode=""></image>
								</view>
								<!-- 中间 -->
								<view class="" style="padding-top: 5px;">

									<view class="" style="display: flex;align-items: center;">
										<span
											style="font-size: 30rpx;font-weight: 1000;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{topicInfo.title}}</span>
										<image src="../../static/ui/chaohua1.png"
											style="margin-left: 5px;height: 20px;width: 80px;" mode=""></image>
									</view>
									<view class="" style="display: flex;align-items: center;margin-top: 6px;">
										<span style="color: #ccc;">{{topicInfo.viewCount}}浏览</span>
										<span style="color: #ccc;margin: 0 4px;">|</span>
										<span style="color: #ccc;margin: 0 4px;">粉丝飙升中</span>

									</view>

								</view>

							</view>

						</view>

						<view class=""
							style="border-radius: 20px;background-color: aquamarine;padding: 5px 10px;width: 100px;">
							<span>海鲜市场</span>
							<view class="">
								<!-- <u-icon size="30" name="rewind-right-fill"></u-icon> -->
							</view>
						</view>


					</view>

					<!-- 右边收藏 -->
					<view class="" style="padding-top: 15px;">
						<view class=""
							style="border-radius: 20px;background-color: yellow;color: black;font-size: 30rpx;padding: 7px 20px;font-weight: 1000;">
							+收藏
						</view>
					</view>

				</view>


				<!-- 公告 -->
				<view class="" style="display: flex;align-items: center;margin-top: 5px;">

					<view class=""
						style="display: flex;align-items: center;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
						<view class=""
							style="border-radius: 5px;background-color: black;color: white;padding: 3px;font-size: 21rpx;">
							公告
						</view>
						<span style="color: #ccc;margin-left: 10px;">{{topicInfo.subheading}}
						</span>
					</view>
					<view class="">

						<u-icon name="arrow-down" size="36" @click="popupShow = !popupShow;"
							:animation="animationData"></u-icon>
					</view>


					<u-popup v-model="popupShow" mode="bottom" border-radius="10" closeable="true" length="60%">
						<view>
							<view class="">
								<view class="" style="display: flex;">
									<view class="" style="display: flex;align-items: center;">
										<view class="" style="">
											<image src="../../static/ali/qiqiu.png"
												style="width: 70px;height: 70px;border-radius: 15px;border: 1px solid white;"
												mode=""></image>
										</view>
										<view class="" style="padding-top: 5px;">

											<view class="" style="display: flex;align-items: center;">
												<span
													style="font-size: 30rpx;font-weight: 1000;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{topicInfo.title}}</span>
												<image src="../../static/ui/chaohua1.png"
													style="margin-left: 5px;height: 20px;width: 80px;" mode=""></image>
											</view>
											<view class="" style="display: flex;align-items: center;margin-top: 6px;">
												<span style="color: #ccc;">207.6浏览</span>
												<span style="color: #ccc;margin: 0 4px;">|</span>
												<span style="color: #ccc;margin: 0 4px;">粉丝飙升中</span>

											</view>

										</view>

									</view>
									<!-- ×icon -->
									<view class="">

									</view>
								</view>
								<view class="" style="padding: 7px;">
									<!-- 简介 -->
									<view class="">
										<view class="" style="color: #ccc;font-weight: 600;margin: 20px 0 10px 0;">
											简介
										</view>
										<view class="" style="margin: 0 0 10px 0;">
											<span>

												{{topicInfo.subheading}}
											</span>
										</view>
									</view>

									<!-- 公告 -->
									<view class="">
										<view class="" style="color: #ccc;font-weight: 600;margin: 20px 0 10px 0;">
											公告
										</view>
										<view class="" style="margin: 0 0 0 0;">
											暂无更新公告哟~
										</view>
									</view>
								</view>



							</view>

						</view>
					</u-popup>
				</view>

			</view>


			<view class="" style="background-color: white;margin-top: 10px;">
				<view class="" style="display: flex;padding: 10px 10px 10px 0;z-index: 99;" :style="[tabStyle]">
					<!-- 按钮 -->
					<view v-for="(buttonItem,indexb) in buttonList" :key="indexb"
						:style="{ backgroundColor: currentTab === indexb ? '#ffff00' : '#ccc',fontWeight: currentTab === indexb ? 'bold' : '' }"
						style="border-radius: 20px;color: black;padding: 5px 13px;margin-left: 10px;"
						@click="changeCurrentTab">
						{{buttonItem.name}}
					</view>
				</view>
				<swiper :current="currentTab" :style="{height: swiperHeight+'px'}" @change="changeCurrentTab" style="">
					<swiper-item v-for="(waterfall,indexc) in buttonList.length" :key="indexc">
						<view class="swiperItem" v-if="currentTab === indexc">
							<view class="" style="background-color: white;margin: 0 10px;">
								<fsz-waterfall @end="waterfallLodEnd">
									<fsz-waterfall-item
										v-for="(item,index) in categoryData[oldButtonList[currentTab]].sortSkuList"
										:key="index" :src="item.coverImage" :price="item.price">
										<view class="fsz-text" style="">
											<!-- 文字内容 -->
											<view class=""
												style="font-size: 24rpx;font-weight: 500;margin-top: 3px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">
												{{item.content}}
											</view>
											<!-- 用户信息 -->
											<view style="display: flex;align-items: center;margin-top: 15rpx;">
												<image :src="item.photoUrl" alt=""
													style="width: 20px;height: 20px;border-radius: 20px;">
													<p style="margin-left: 5px;color: #ccc;font-size: 20rpx;">
														{{item.nickName}}
													</p>
											</view>
										</view>
									</fsz-waterfall-item>
								</fsz-waterfall>
							</view>
						</view>

					</swiper-item>

				</swiper>





			</view>





		</view>


	</view>
</template>

<script>
	import danmu from './components/danmu.vue';
	import fszWaterfall from "@/components/fsz-waterfall/fsz-waterfall.vue"
	import fszWaterfallItem from "@/components/fsz-waterfall-item/fsz-waterfall-item.vue"
	export default {
		components: {
			danmu,
			fszWaterfall,
			fszWaterfallItem
		},
		data() {
			return {
				popupShow: false,
				list: [
					'新年到，祝福来报到：大财、小财、意外财，财源滚滚',
					'亲情、爱情、朋友情，份份真情',
					'官运、财运、桃花运，运运亨通',
					'爱人、亲人、家里人，人人平安',
					'福气多多',
					'快乐连连',
					'万事圆圆',
					'微笑甜甜',
					'一帆风顺',
					'二龙腾飞',
					'三羊开泰',
					'四季平安',
					'五福临门',
					'六六大顺',
					'七星高照',
					'八方来财',
					'九九同心',
					'十全十美！',
					'新年快乐'
				],
				danmuIndex: 0,
				oldButtonList: [],
				buttonList: [],
				images: [
					"https://img1.baidu.com/it/u=1846739246,1896104158&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499",
					"https://img2.baidu.com/it/u=2819658794,2339004428&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
					"https://img0.baidu.com/it/u=2456717420,4235785874&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=751",
					"https://img1.baidu.com/it/u=2585454700,2950905306&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
					"https://img1.baidu.com/it/u=1705729361,2617841784&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=680",
					"https://img0.baidu.com/it/u=361393016,1279956897&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
				],
				swiperHeight: 0,

				currentTab: 0, //当前所处分类

				//路由跳转数据
				topicInfo: {},
				clickSkuInfo: {},

				//分页数据
				sortSkuList: [],
				current: 1,
				pages: 2,
				categoryData: {}, // 存储各分类的分页数据
				pageFlag: false,

				//箭头动画数据
				animationData: null,
				isFlipped: false
			};
		},
		computed: {
			tabStyle() {
				return {
					backgroundColor: this.scrollTop > 100 ? 'white' : '',
					position: this.scrollTop > 100 ? 'fixed' : '',
					top: this.scrollTop > 100 ? '40px' : '',
					zIndex: this.scrollTop > 100 ? '99' : '',
					width: this.scrollTop > 100 ? '100%' : ''

				};
			}
		},
		mounted() {
			this.getSkuListByInnerSort()

			setInterval(() => {
				this.colrdo();
			}, 200)
		},
		onReachBottom() {

			console.log("触底了", this.current);
			if (this.current < this.pages) {
				this.current++
				this.getSkuListByInnerSort()
			}
		},
		watch: {
			popupShow(newValue, oldValue) {
				// 创建新的动画实例
				let animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
					transformOrigin: '50% 50% 0'
				});

				if (this.isFlipped) {
					// 如果卡片已经翻转，执行翻转回来的动画
					animation.rotate(0).step();
					this.isFlipped = false;
				} else {
					// 如果卡片未翻转，执行翻转的动画
					animation.rotateX(180).step();
					this.isFlipped = true;
				}

				// 将动画数据输出并更新状态
				this.animationData = animation.export();
			}
		},
		methods: {
			async getSkuListByInnerSort() {
				let form = {
					current: this.current,
					size: 3,
					sortName: this.oldButtonList[this.currentTab],
					topicId: this.topicInfo.id
				}

				let result = await this.$u.api.getSkuListByInnerSort(form)
				this.pages = result.pages


				//如果是换分页，就要重新写sortSkuList
				//如果换分页是已经有的分页，不能进入判断
				if (this.pageFlag) {
					this.sortSkuList = [...result.records]
					this.pageFlag = false
				} else {
					//触底的话
					this.sortSkuList = this.sortSkuList.concat(result.records)
				}

				this.$set(this.categoryData, this.oldButtonList[this.currentTab], {
					current: this.current,
					pages: this.pages,
					sortSkuList: this.sortSkuList,
				});
			},

			colrdo() {
				this.danmuIndex++;
				this.$refs.lffBarrage.add({
					item: this.list[(this.danmuIndex % this.list.length) + 1]
				});
			},
			initSwiperHeightListener() {
				setTimeout(() => {
					uni.createSelectorQuery().select('.swiperItem').boundingClientRect(rect => {
						this.swiperHeight = rect.height;

					}).exec()
				}, 0)

			},
			changeCurrentTab(e) {

				this.currentTab = e.detail.current

				// 切换分类时保存旧分类数据
				//如果切换分页，不能直接set，而是要等待数据返回
				// if(){
				// 	this.$set(this.categoryData, this.oldButtonList[this.currentTab], {
				// 		current: this.current,
				// 		pages: this.pages,
				// 		sortSkuList: this.sortSkuList,
				// 	});
				// }

				console.log("我的数据", this.categoryData);
				//如果有数据老数据，则拿，没有就重置分页参数
				if (this.categoryData[this.oldButtonList[this.currentTab]]) {
					let pageresult = this.categoryData[this.oldButtonList[this.currentTab]]
					this.current = pageresult.current
					this.pages = pageresult.pages
					this.sortSkuList = [...pageresult.sortSkuList]

				} else {
					this.pageFlag = true
					//重置分页参数
					this.current = 1
					this.pages = 2
					this.sortSkuList = []

					this.getSkuListByInnerSort()
				}

			},

			waterfallLodEnd() {
				this.initSwiperHeightListener()
			},
			backtoItem() {
				uni.navigateBack()
			},

		},
		onLoad: function(option) {
			this.topicInfo = JSON.parse(decodeURIComponent(option.topicInfo))

			console.log("拿掉", this.topicInfo);
			this.oldButtonList = this.topicInfo.topicInnerSortList
			this.buttonList = this.topicInfo.topicInnerSortList.map((item) => {
				return {
					name: item
				}
			})
			if (option.topicSkuInfo) {
				this.clickSkuInfo = JSON.parse(decodeURIComponent(option.topicSkuInfo))

			}


		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			this.scrollTop = e.scrollTop
		}
	};
</script>

<style lang="scss" scoped>
	.button {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>